<template>
    <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import echarts from "echarts";
import tdTheme from "./theme.json";
import { on, off } from "@/libs/tools";
echarts.registerTheme("tdTheme", tdTheme);
export default {
    name: "ChartBar",
    props: {
        value: Object,
        text: String,
        subtext: String,
        color: Array
    },
    data() {
        return {
            dom: null
        };
    },
    methods: {
        resize() {
            this.dom.resize();
        }
    },
    watch: {
        value() {
            this.setEchartsData();
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.setEchartsData();
            on(window, "resize", this.resize);
        });
    },
    methods: {
        setEchartsData() {
            let xAxisData = Object.keys(this.value);
            let seriesData = Object.values(this.value);
            let option = {
                //
                tooltip: {
                    // trigger: "axis",
                    axisPointer: {
                        type: "none"
                    }
                },
                title: {
                    text: this.text,
                    //   二级标题
                    subtext: this.subtext,
                    x: "center",
                    y: "bottom",
                    textStyle: {
                        color: "#000"
                    }
                },
                xAxis: {
                    type: "category",
										data: xAxisData,
										axisTick: {
												show: false
										},
										axisLine: {
												show: false
										},
										splitLine: {
											show: false
										},
										z: 10
                },
                yAxis: {
										type: "value",
										/** y轴刻度线 */
										axisLine: {
											show: false
										},
										axisTick: {
												show: false
										},
										// 刻度线
										splitLine: {
											show: true
										},
                },
                series: [
                    {
                        //   name: '访问',
                        data: seriesData,
												type: "bar",
												// barCategoryGap: '10%', /** 柱状图元素宽度 */
												// barGap: '-100%',
                        itemStyle: {          /** 每个元素的颜色 */
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        "#FFDF25",
                                        "#36A9CE",
                                        "#3399FF",
                                        "#33FFCE",
                                        "#EC4E4E"
                                    ];
                                    return colorList[params.dataIndex];
                                }
														},
                        },
												// showBackground: true, /** 柱状背景 */
												barWidth: '40%' /** 柱状图宽度 */
                    }
                ]
            };
            this.dom = echarts.init(this.$refs.dom, "tdTheme");
            this.dom.setOption(option);
        }
    },
    beforeDestroy() {
        off(window, "resize", this.resize);
    }
};
</script>
